<style lang="less" scoped>
    .address-box{
        width: 100%;
        height: 100%;
            border-top: 1px solid #e5e5e5;
        background: #f0f0f0;
        .address-box_info{
            box-sizing: border-box;
            .item{
                width: 100%;
                height:131px;
                background: #fff;
                display: flex;
                margin-bottom: 10px;
                flex-direction: column;
                border-bottom: 1px slid #e5e5e5;
                
                .item-tit{
                    width: 100%;
                    height: 42px;
                    line-height: 42px;
                    font-size: 16px;
                    padding: 0px 13px;
                    box-sizing: border-box;
                    display: flex;
                    >span:first-child{
                        display: block;
                        flex: 1;
                    }
                }
                .item-detail{
                    width: 100%;
                    font-size: 14px;
                    min-height: 20px;
                    line-height: 20px;
                    padding: 0 10px;
                    margin-bottom: 15px;
                }
                .item-btn{
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    display: flex;
                    padding: 0 10px;
                    box-sizing: border-box;
                    border-top: 1px solid #e5e5e5;
                }
                .defaultBtn{
                    width: 100px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    line-height: 40px;
                    >img{
                        width: 17px;
                        height: 17px;
                        display: block;
                        margin-right: 5px
                    }

                }
                .defaultBtn.current{
                    
                    >span{
                        color: #7A1634;
                    }
                }
                .item-btn_eidt{
                    flex: 1;
                    display: flex;
                    align-items: flex-end;
                    justify-content:flex-end;
                    >img{
                    	width: 20px;
                    	height: 20px;
                    }
                }
            }
        }
        .address-box_btn{
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: #7A1634;
            text-align: center;
            position: fixed;
            bottom: 0px;
            left: 0px;
            right: 0px;
            display: block;
            border-radius: none;
            
        }
        .handle-span{
        	display: flex;
        	justify-content: center;
        	align-items: center;
        }
        .handle-span:first-child{
        	margin-right: 10px;
        }
        .imgIcon{
        	width: 14px;
            height: 16px;
            vertical-align: middle;
        	margin-right: 5px;
        }
        
       
    }
</style>
<template>
    <div class="address-box">
        <ul class="address-box_info" v-if="list && list.length>0">
        	<!---->
            <li class="item" v-for="(item,index) in list" :key="index" @click="selectAddresss(item)">
                <div class="item-tit">
                    <span class="text-15 text-black">收货人：{{item.name}}</span>
                    <span class="text-15 text-black">{{item.number}}</span>
                </div>
                <div class="item-detail text-12">
                    地址：{{item.info}}
                </div>
                <div class="item-btn">
                    <div class="defaultBtn" :class="{'current':item.select}">
                        <img :src="item.select?ySelectIcon:yIcon" @click.stop.prevent="setDefault(item)"/>
                        <span class="text-12" >设为默认</span>
                    </div>
                    <div class="item-btn_eidt">
                    	
                        <span  class="text-12 handle-span" @click.stop.prevent="addAddress"><img class="imgIcon" :src="editIcon"/> 编辑</span>
                        <span  class="text-12 handle-span" @click.stop.prevent="deleteAddress(index)"><img class="imgIcon" :src="deleteIcon" /> 删除</span>
                        <!--<span class="text-12">删除</span>-->
                    </div>
                </div>
            </li>
           
        </ul>
        <span class="address-box_btn text-white text-16" @click="addAddress">添加地址</span>
    </div>
</template>
<script>
import yIcon from '@/assets/images/yIcon.png'
import editIcon from '@/assets/images/editIcon.png'
import deleteIcon from '@/assets/images/deleteIcon.png'
import ySelectIcon from '@/assets/images/ySlectIcon.png'
import { mapActions } from 'vuex'
export default {
    'title':'地址',
    data(){
        return{
            yIcon: yIcon,
            editIcon: editIcon,
            deleteIcon: deleteIcon,
            ySelectIcon: ySelectIcon,
            list:[{
                name:'穿穿001',
                number:'1385555',
                select:false,
                info:'广东省 深圳市 南山区 茂业时代广场24c'
            },
            {
                name:'穿穿002',
                number:'1381551515',
                select:false,
                info:'广东省 深圳市 南山区 茂业时代广场24c'
            }
            ]
        }
    },
    methods: {
    	deleteAddress(index){
    		let _this = this
    		wx.showModal({
			  title: '提示',
			  content: '确定删除改地址？',
			  success: function(res) {
			    if (res.confirm) {
			      _this.list.splice(index,1)
				    wx.showToast({
		    			icon:'none',
		    			title:'删除成功'
	    			})
			    } 
			  }
			})
    	},
    	selectAddresss(item) {
    		wx.navigateTo({
			  url: '/pages/order-detail/main?id=1'
			})
    		this.setAddress(item)
    	},
        setDefault(item){
            this.list.forEach(element => {
                element.select = false;
            });
            item.select =true
        },
        addAddress(){
            wx.redirectTo({
                url: '/pages/address-edit/main'
            })
        },
        ...mapActions([
            'setAddress'
        ]),
    }
}
</script>

